<template>
  <div class="process-item">
    <table border="0" cellPadding="0" cellSpacing="0">
      <thead>
        <tr>
          <th>工厂单号</th>
          <th>模具型号</th>
          <th>颜色</th>
          <th>
            <div class="process-item-size">
              <span>28码</span>
              <div><span class="process-item-size-label">数量：</span>538</div>
            </div>
          </th>
          <th>
            <div class="process-item-size">
              <span>28码</span>
              <div><span class="process-item-size-label">数量：</span>538</div>
            </div>
          </th>
          <th>
            <div class="process-item-size">
              <span>28码</span>
              <div><span class="process-item-size-label">数量：</span>538</div>
            </div>
          </th>
          <th>
            <div class="process-item-size">
              <span>28码</span>
              <div><span class="process-item-size-label">数量：</span>538</div>
            </div>
          </th>
          <th>
            <div class="process-item-size">
              <span>28码</span>
              <div><span class="process-item-size-label">数量：</span>538</div>
            </div>
          </th>
          <th>
            <div>合计数量：2538</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>231310</td>
          <td>RB-386</td>
          <td>深蓝</td>
          <td>
            <div class="process-tag-container">
              <div class="process-tag process-tag-total">368</div>
              <div class="process-tag process-tag-current">1198</div>
              <div class="process-tag process-tag-debt">2376</div>
            </div>
          </td>
          <td>
            <div class="process-tag-container">
              <div class="process-tag process-tag-total">368</div>
              <div class="process-tag process-tag-current">1198</div>
              <div class="process-tag process-tag-debt">2376</div>
            </div>
          </td>
          <td>
            <div class="process-tag-container">
              <div class="process-tag process-tag-total">368</div>
              <div class="process-tag process-tag-current">1198</div>
              <div class="process-tag process-tag-debt">2376</div>
            </div>
          </td>
          <td>
            <div class="process-tag-container">
              <div class="process-tag process-tag-total">368</div>
              <div class="process-tag process-tag-current">1198</div>
              <div class="process-tag process-tag-debt">2376</div>
            </div>
          </td>
          <td>
            <div class="process-tag-container">
              <div class="process-tag process-tag-total">368</div>
              <div class="process-tag process-tag-current">1198</div>
              <div class="process-tag process-tag-debt">2376</div>
            </div>
          </td>
          <td>
            <div class="process-tag-container">
              <div class="process-tag process-tag-total">368</div>
              <div class="process-tag process-tag-current">1198</div>
              <div class="process-tag process-tag-debt">2376</div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script setup>
</script>
<style lang="scss">
.process-item {
  table {
    width: 100%;
    th {
      font-size: 26px;
      font-weight: bold;
    }
    th,
    td {
      padding: 6px 6px;
    }
  }

  .process-item-size {
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 24px;
    font-weight: normal;
  }
  .process-item-size-label {
    font-size: 26px;
    font-weight: bold;
  }
  .process-tag-container {
    display: flex;
    align-items: center;
  }
  .process-tag {
    padding: 15px 16px;
    min-width: 76px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
  }
  .process-tag-total {
    border-radius: 6px 0 0 6px;
    background-image: var(--green-gradient-color);
  }
  .process-tag-current {
    background-image: var(--blue-gradient-color);
  }
  .process-tag-debt {
    color: var(--red-color);
    border-radius: 0 6px 6px 0;
    background-image: var(--bg-gradient-color);
  }
}
</style>
